<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-09-01
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2023-09-01
 * @FilePath: /element-admin/src/views/GitUsers.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="QuartzCal-page">
    <!--顶部搜索栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <el-form :inline="true" :model="query" class="demo-form-inline">
            <el-form-item label="触发器名称">
              <el-input v-model="query.key" placeholder="触发器名称" size="small"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleFetch" class="register_btn" size="small">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-form-item>
                <el-button type="danger" @click="handlerOpenDraw" class="register_btn" size="small">创建任务</el-button>
              </el-form-item>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!--中部数据表格栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <el-table :header-cell-style="{background: '#eef1f6', color:'#606266'}"
                    :data="quartzsList"
                    :cell-style="{padding:'3px'}"
                    :row-style="{height:'30px'}"
                    :height="tableHeight" :key="isIndex" style="width: 100%" v-loading="isLoading" border stripe row-key="id"
                    :default-sort="{prop: 'effort_date', order: 'descending'}">
            <el-table-column type="expand">

              <template slot-scope="props">
                <el-col :span="23" :offset="0">
                <el-descriptions :column="4" border class="margin-top" :size="'mini'" :contentStyle="content_style" :label-style="label_style">
                  <el-descriptions-item :span="2">
                    <template slot="label"><i class="el-icon-mobile-phone"></i> 表达式</template>
                    <span>{{ props.row.cronExpression }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item :span="2">
                    <template slot="label"><i class="el-icon-mobile-phone"></i> 下一次触发时间</template>
                    <span>{{ props.row.nextFireTime }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item >
                    <template slot="label"><i class="el-icon-mobile-phone"></i> 任务名称</template>
                    <span>{{ props.row.jobName }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item >
                    <template slot="label"><i class="el-icon-mobile-phone"></i> 任务组</template>
                    <span>{{ props.row.jobGroupName }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item >
                    <template slot="label"><i class="el-icon-mobile-phone"></i> 触发器名称</template>
                    <span>{{ props.row.triggerName }}</span>
                    <span>{{ props.row.triggerName_post }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item >
                    <template slot="label"><i class="el-icon-mobile-phone"></i> 触发器组</template>
                    <span>{{ props.row.triggerGroupName }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item :span="2">
                    <template slot="label"><i class="el-icon-mobile-phone"></i> 执行类</template>
                    <span>{{ props.row.jobClass }}</span>
                  </el-descriptions-item>
                  <el-descriptions-item :span="2">
                    <template slot="label"><i class="el-icon-mobile-phone"></i> 回调地址</template>
                    <span>{{ props.row.callBack }}</span>
                  </el-descriptions-item>
                </el-descriptions>
                </el-col></template>
            </el-table-column>
            <el-table-column v-if="isIndex == 1" type="index" label="序号" width="75" fixed ></el-table-column>
            <!--              <el-table-column prop="id" label="项目ID" width="80"></el-table-column>-->
            <el-table-column prop="jobName" label="任务名称" ></el-table-column>
            <el-table-column prop="jobGroupName" label="任务组" v-if="false"></el-table-column>
            <el-table-column prop="triggerName" label="触发器名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="triggerGroupName" label="触发器组" v-if="false"></el-table-column>
            <el-table-column prop="jobClass" label="执行类" width="120" v-if="false"></el-table-column>
            <el-table-column prop="cronExpression" label="表达式"  v-if="false"></el-table-column>
            <el-table-column prop="nextFireTime" label="下一次触发时间" ></el-table-column>
            <el-table-column prop="callBack" label="回调地址" v-if="false"></el-table-column>
            <el-table-column prop="triggerState" label="执行状态" ></el-table-column>
            <el-table-column label="操作" :width="optCulWidth">
              <template slot-scope="scope">
                <el-button type="danger" @click.native="handleDelete(scope.row)" class="register_btn" size="small">删除</el-button>
                <el-dropdown size="small" split-button type="success" style="margin-left: 10px;" @click="info(scope.row)">修改
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="handleRef(scope.row)">刷新</el-dropdown-item>
                    <el-dropdown-item @click.native="handleStop(scope.row)">停止</el-dropdown-item>
                    <el-dropdown-item @click.native="handleRenew(scope.row)">恢复</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="22" :offset="1" class="custRow clearfix">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :pager-count=5
              :page-sizes="[20, 50, 100]"
              :page-size="query.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :page-count=10
              :total="query.total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-drawer title="定时任务明细" :visible.sync="isDrawerShow" :with-header="false" :size="drawerWidth">
        <QuarzeDrawer ref="quarzeDrawer" :drawId.sync="quartzId" @fMethod="closeDraw"></QuarzeDrawer>
      </el-drawer>
    </div>
  </div>
</template>
<script>
import {mapMutations} from "vuex";

import {Delete, fetchQuartzs, Ref, Renew, Stop} from "@/api/quartzApi";
import QuarzeDrawer from '@/views/quartz/quartzDrawer/QuartzDrawer.vue'

export default {
  name: "QuartzCal",
  components: {QuarzeDrawer},
  data() {
    return {
      isIndex: 1,
      isLoading: false,
      currentPage: 1,
      optCulWidth: 180,
      total: 0,
      query: {
        key: '',
        pageSize: 20,
        pageNum: 1,
      },
      tableHeight: 650,
      drawerWidth: "1240px",
      quartzsList: [],
      isDrawerShow: false,
      quartzId: 0,
      content_style: {
        'text-align': 'left',
        'min-width': '140px',
        'word-break': 'break-all'
      },
      label_style: {
        // 'color': '#000',
        'text-align': 'left',
        // 'background-color': '#d6dbe1',
        'min-width': '80px',
        'word-break': 'keep-all'
      }
    }
  },
  computed: {},
  methods: {
    Ref,
    Stop,
    Renew,
    Delete,
    ...mapMutations(['add_tab']),
    handleFetch() {
      this.isLoading = true;
      fetchQuartzs(this.query).then(res => {
        let _res = eval(res.data);
        // console.log("res", eval(res.data))
        // 刷新页面表格
        this.quartzsList = _res.list;
        this.currentPage = _res.currentPage;
        this.query.pageSize = _res.pageSize;
        this.query.total = _res.total;
        this.isLoading = false;
      }).catch(err => {
        this.isLoading = false;
        this.$message.error('错了哦，这是一条错误消息' + err);
      });
    },
    /**
     * 页面详细打开drawer
     * @param params
     * @returns {Promise<*>}
     */
    info(row) {
      this.quartzId = row.id;
      this.isDrawerShow = true;
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange(size) {
      this.query.pageSize = size;
      fetchQuartzs(this.query);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.query.pageNum = currentPage;
      fetchQuartzs(this.query);
    },
    /**
     * 页面操作刷新行为
     * @param params
     * @returns {Promise<*>}
     */
    handleRef(row) {
      let params = {"jobName": row.jobName, "jobGroupName": row.jobGroupName}
      this.Ref(params).then((res) => {
        if (res.code == 200) {
          this.handleFetch()
        }
      });
    },
    /**
     * 页面操作停止行为
     * @param params
     * @returns {Promise<*>}
     */
    handleStop(row) {
      let params = {"jobName": row.jobName, "jobGroupName": row.jobGroupName}
      this.Stop(params).then((res) => {
        if (res.code == 200) {
          this.handleFetch()
        }
      });
    },
    /**
     * 页面操作恢复行为
     * @param params
     * @returns {Promise<*>}
     */
    handleRenew(row) {
      let params = {"jobName": row.jobName, "jobGroupName": row.jobGroupName}
      this.Renew(params).then((res) => {
        if (res.code == 200) {
          this.handleFetch()
        }
      });
    },
    handleDelete(row) {
      this.Delete(row.id).then((res) => {
        if (res.code == 200) {
          this.handleFetch()
        }
      });
    },
    handlerOpenDraw() {
      // console.log(row)
      this.isDrawerShow = true;
      this.quartzId = 0;
    },
    closeDraw(e) {
      if (e) {
        this.handleFetch();
        this.drawId = 0;
      }
      this.isDrawerShow = false;
    }
  },
  created() {
    this.handleFetch();
  },
  mounted() {
  },
}
</script>
<style scoped>

.custRow {
  display: flex;
  margin-top: 5px;
  padding: 5px 5px 5px 5px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}


</style>